<!--
  ~ Copyright 2022 Nightingale Team
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    .preloader {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .preloader__enter {
      opacity: 0;
      animation-name: preloader-fade-in;
      animation-iteration-count: 1;
      animation-duration: 0.9s;
      animation-delay: 0.5s;
      animation-fill-mode: forwards;
    }

    .preloader__bounce {
      text-align: center;
      animation-name: preloader-bounce;
      animation-duration: 0.9s;
      animation-iteration-count: infinite;
    }

    .preloader__logo {
      display: inline-block;
      animation-name: preloader-squash;
      animation-duration: 0.9s;
      animation-iteration-count: infinite;
      width: 60px;
      height: 60px;
      background-repeat: no-repeat;
      background-size: contain;
      background-image: url('/image/logo-light.png');
    }

    @keyframes preloader-fade-in {
      0% {
        opacity: 0;
        /*animation-timing-function: linear;*/
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes preloader-bounce {

      from,
      to {
        transform: translateY(0px);
        animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
      }

      50% {
        transform: translateY(-50px);
        animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
      }
    }

    @keyframes preloader-squash {
      0% {
        transform: scaleX(1.3) scaleY(0.8);
        animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
      }

      15% {
        transform: scaleX(0.75) scaleY(1.25);
        animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
      }

      55% {
        transform: scaleX(1.05) scaleY(0.95);
        animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
      }

      95% {
        transform: scaleX(0.75) scaleY(1.25);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
      }

      100% {
        transform: scaleX(1.3) scaleY(0.8);
        animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
      }
    }
  </style>
  <script src="/js/node-sql-parser@4.10.0_umd_mysql.umd.js"></script>
  <script src="/js/placement.min.js"></script>
</head>

<body>
  <div class="preloader">
    <div class="preloader__enter">
      <div class="preloader__bounce">
        <div class="preloader__logo" aria-live="polite" role="status" aria-label="Loading Nightingale"></div>
      </div>
    </div>
  </div>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script type="module">
    // 根据环境变量决定是否加载 Headway widget
    if (!import.meta.env.VITE_IS_PRO && !import.meta.env.VITE_IS_PRO) {
      // 动态加载 Headway widget 脚本
      const script = document.createElement('script');
      script.src = '/js/widget.js';
      document.head.appendChild(script);
    }
  </script>

</body>

</html>